import { Delete } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import type { Action, MessageBoxState } from "element-plus";
import { h, markRaw } from "vue";

export const showDelConfirmDialog = (
  title: string,
  content: string,
  beforeClose: (done: (loading?: boolean) => void) => void
) => {
  const _beforeClose = (
    action: Action,
    instance: MessageBoxState,
    done: () => void
  ) => {
    if (action !== "confirm") return done();
    const timeout = setTimeout(() => {
      instance.confirmButtonLoading = true;
    }, 100);
    const _done = (loading: boolean = true) => {
      // 清除定时器
      clearTimeout(timeout);
      // 停止 loading 状态
      instance.confirmButtonLoading = false;
      // 如果 loading 为 false，则直接返回
      if (!loading) return;
      // 关闭对话框
      done();
    };
    beforeClose(_done);
  };
  return ElMessageBox({
    title: title,
    message: h("div", {}, [
      "确定要删除 ",
      h("span", { style: { color: "red" } }, content),
      " 吗？",
    ]),
    icon: markRaw(Delete),
    beforeClose: _beforeClose,
    showCancelButton: true,
    confirmButtonText: "确定删除",
    confirmButtonClass: "el-button--danger",
    cancelButtonText: "取消",
    closeOnClickModal: false,
    showClose: false,
    type: "error",
  });
};
